<style scoped>

</style>
<template> 
    <div class="plan-tracking-page">
        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
            <el-tab-pane label="按备件跟踪" name="first">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
                    <el-form-item label="法人名称" class="selectMB10">
                        <el-input v-if="legalPersonDropDown.length == 1" disabled  v-model="formInline.legalPersonName"></el-input>
                        <el-select size="mini" clearable v-else  v-model="formInline.legalPersonName" placeholder="请选择" @change="changeLegalPerson">
                            <el-option v-for="(legalPerson,index) in legalPersonDropDown" :key="index" :label="legalPerson.legalPersonName" :value="legalPerson.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="计划编号" class="selectMB10">
                        <el-input  v-model="formInline.planCode" placeholder="请输入计划编号"></el-input>
                    </el-form-item>
                    <el-form-item label="计划状态" class="selectMB10">
                        <el-select size="mini" clearable v-model="formInline.status" placeholder="请选择">
                            <el-option label="已保存" value="1"></el-option>
                            <el-option label="已提交" value="2"></el-option>
                            <el-option label="已审核" value="3"></el-option>
                            <el-option label="已审批" value="4"></el-option>
                            <el-option label="已完成" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备件编码" class="selectMB10">
                        <el-input  v-model="formInline.materialCode" placeholder="请输入备件编码"></el-input>
                    </el-form-item>
                    <el-form-item label="备件名称" class="selectMB10">
                        <el-input  v-model="formInline.materialName" placeholder="请输入备件名称"></el-input>
                    </el-form-item>
                    <el-form-item label="制定日期" class="selectMB10">
                        <el-date-picker type="date" size="mini" :editable="false" v-model="formInline.createTimeBegin" @change="selectedCreateTimeBegin" placeholder="请选择"></el-date-picker>
                        &nbsp;至&nbsp;
                        <el-date-picker type="date" size="mini" :editable="false" v-model="formInline.createTimeEnd"  @change="selectedCreateTimeEnd" placeholder="请选择"></el-date-picker>
                    </el-form-item>
                     <!--<el-form-item label="供应商编码" class="selectMB10">
                        <el-select size="mini" clearable  v-model="formInline.partnerCode" placeholder="请选择" prop="supplierName">
                            <el-option v-for="(vendor,index) in formInline.supplierDropdown" :key="index" :label="vendor.partnerCode" :value="vendor.partnerCode"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商名称" class="selectMB10">
                        <el-select size="mini" clearable  v-model="formInline.partnerName" placeholder="请选择" prop="supplierCode">
                            <el-option v-for="(vendor,index) in formInline.supplierDropdown" :key="index" :label="vendor.partnerName" :value="vendor.partnerName"></el-option>
                        </el-select>
                    </el-form-item>-->
                    <!-- 
                    <el-form-item class="selectMB10">
                        <el-button class="bolder outsideBtnBS" size="mini" type="danger">更多...</el-button>
                    </el-form-item>
                    -->
                    <el-form-item class="selectMB10">
                        <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="queryMateriaSheet()">查询</el-button>
                    </el-form-item>

                </el-form>
                <!--备件明细-->
                <label class="default-label">备件明细：</label>
                <el-table :data="materiaData" border style="width: 100%" v-loading.body="loading" element-loading-text="拼命加载中">
                    <el-table-column  type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>

                    <el-table-column  label="操作" header-align="center" align="center" width="60" v-if="powerFlag">
                        <template scope="scope">
                            <div class="operationItem bolder">完成</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="planCode" header-align="center" label="计划编号" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="materialCode" header-align="center" label="备件编码" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="materialName" header-align="center" label="备件名称" width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="unit" header-align="center" label="计量单位" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="quantity" header-align="center" label="计划总数量" width="100">
                    </el-table-column>
                    <el-table-column prop="asignedCount" label="已分配数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="handleAsignedCount(scope.$index, scope.row)" class="blueFont">{{scope.row.asignedCount}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unAsignedCount" header-align="center" label="未分配数量" width="100">
                    </el-table-column>

                    <el-table-column prop="purcheasedCount" label="已采购数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="check2(scope.$index, scope.row)" class="blueFont">{{scope.row.purcheasedCount}}</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="unPurcheasedCount" header-align="center" label="未采购数量" width="100">
                    </el-table-column>

                    <el-table-column prop="delivered" label="已送货数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="check3(scope.$index, scope.row)" class="blueFont">{{scope.row.delivered}}</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="notDelivered" header-align="center" label="未送货数量" width="100">
                    </el-table-column>
                    <!-- 
                    <el-table-column prop="materialQuantity2" label="已收货数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="check4(scope.$index, scope.row)" class="blueFont">{{scope.row.materialQuantity2}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="materialQuantity5"
                            header-align="center"
                            label="未收货数量"
                            width="100">
                    </el-table-column>

                    <el-table-column prop="materialQuantity6" label="已入库数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="check5(scope.$index, scope.row)" class="blueFont">{{scope.row.materialQuantity6}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="materialQuantity2"
                            header-align="center"
                            label="未入库数量"
                            width="100">
                    </el-table-column>

                    <el-table-column prop="materialQuantity7" label="入库不良数量" header-align="center" width="120">
                        <template scope="scope">
                            <el-button size="mini" @click="check6(scope.$index, scope.row)" class="blueFont">{{scope.row.materialQuantity7}}</el-button>
                        </template>
                    </el-table-column>
                    -->
                    <el-table-column prop="currencyCodeWord" header-align="center" label="币别" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="amount" header-align="center" align="right" label="计划总金额" width="100">
                    </el-table-column>
                    <el-table-column prop="statusWord" header-align="center" align="center" label="状态" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="creatorName" header-align="center" label="制定人" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="createTime" header-align="center" label="制定时间" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="reviewerName" header-align="center" label="审核人" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="reviewTime" header-align="center" label="审核时间" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="approverName" header-align="center" label="审批人" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="approvalTime" header-align="center" label="审批时间" width="100" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="pageIndex"  :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage"
                               :total="totalNumber"></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="按计划跟踪" name="second">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
                    <el-form-item label="法人名称" class="selectMB10">
                        <el-input v-if="legalPersonDropDown.length == 1" disabled  v-model="formInline.legalPersonName"></el-input>
                        <el-select size="mini" clearable v-else v-model="formInline.legalPersonName" placeholder="请选择" @change="changeLegalPerson">
                            <el-option v-for="(legalPerson,index) in legalPersonDropDown" :key="index" :label="legalPerson.legalPersonName" :value="legalPerson.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="计划编号" class="selectMB10">
                        <el-input  v-model="formInline.planCode" placeholder="请输入计划编号"></el-input>
                    </el-form-item>

                    <el-form-item label="计划状态" class="selectMB10">
                        <el-select size="mini" clearable v-model="formInline.status" placeholder="请选择">
                            <el-option label="已保存" value="1"></el-option>
                            <el-option label="已提交" value="2"></el-option>
                            <el-option label="已审核" value="3"></el-option>
                            <el-option label="已审批" value="4"></el-option>
                            <el-option label="已完成" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="制定人员" class="selectMB10">
                        <el-input  v-model="formInline.creatorName" placeholder="请输入指定人编号"></el-input>
                    </el-form-item>
                    <el-form-item label="制定日期" class="selectMB10">
                        <el-date-picker type="date" size="mini" :editable="false" v-model="formInline.createTimeBegin"  @change="selectedCreateTimeBegin" placeholder="请选择"></el-date-picker>
                        &nbsp;至&nbsp;
                        <el-date-picker type="date" size="mini" :editable="false" v-model="formInline.createTimeEnd"  @change="selectedCreateTimeEnd" placeholder="请选择"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="审核人员" class="selectMB10">
                        <el-input  v-model="formInline.reviewerName" placeholder="请输入审核人员"></el-input>
                    </el-form-item>
                    <el-form-item label="审批人员" class="selectMB10">
                        <el-input  v-model="formInline.approverName" placeholder="请输入审批人员"></el-input>
                    </el-form-item>
                    <el-form-item class="selectMB10">
                        <el-button class="bolder outsideBtnBS selectAll" :disabled="select2Disabled" size="mini" type="danger" @click="queryPlanTrackingSheet()">查询</el-button>
                    </el-form-item>

                </el-form>
                <!--计划明细-->
                <label class="default-label">计划明细：</label>
                <el-table :data="planData" border style="width: 100%" v-loading.body="loading2" element-loading-text="拼命加载中">
                    <el-table-column  type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>

                    <el-table-column fixed
                            label="操作"
                            header-align="center" align="center"
                            width="60" v-if="powerFlag">
                        <template scope="scope">
                            <div class="operationItem bolder" @click="dialogVisible = true">完成</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sourceWord"
                            header-align="center"
                            label="来源"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="planCode"
                            header-align="center"
                            label="计划编号"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="totalCount"
                            header-align="center"
                            label="计划总数量"
                            width="100">
                    </el-table-column>
                    <el-table-column prop="asignedCount" label="已分配数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="handleAsignedCount(scope.$index, scope.row)" class="blueFont">{{scope.row.asignedCount}}</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="unAsignedCount"
                            header-align="center"
                            label="未分配数量"
                            width="100">
                    </el-table-column>

                    <el-table-column prop="purcheasedCount" label="已采购数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="check2(scope.$index, scope.row)" class="blueFont">{{scope.row.purcheasedCount}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unPurcheasedCount"
                            header-align="center"
                            label="未采购数量"
                            width="100">
                    </el-table-column>

                    <el-table-column prop="delivered" label="已送货数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="check3(scope.$index, scope.row)" class="blueFont">{{scope.row.delivered}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="notDelivered"
                            header-align="center"
                            label="未送货数量"
                            width="100">
                    </el-table-column>
                    <!-- 
                    <el-table-column prop="switch10" label="已收货数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="check4(scope.$index, scope.row)" class="blueFont">{{scope.row.switch10}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="switch11"
                            header-align="center"
                            label="未收货数量"
                            width="100">
                    </el-table-column>

                    <el-table-column prop="switch12" label="已入库数量" header-align="center">
                        <template scope="scope">
                            <el-button size="mini" @click="check5(scope.$index, scope.row)" class="blueFont">{{scope.row.switch12}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="switch13"
                            header-align="center"
                            label="未入库数量"
                            width="100">
                    </el-table-column>

                    <el-table-column prop="switch14" label="入库不良数量" header-align="center" width="120">
                        <template scope="scope">
                            <el-button size="mini" @click="check6(scope.$index, scope.row)" class="blueFont">{{scope.row.switch14}}</el-button>
                        </template>
                    </el-table-column>
                    -->
                    <el-table-column  prop="currencyCodeWord"
                            header-align="center"
                            label="币别"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column  prop="total"
                            header-align="center" align="right"
                            label="总金额"
                            width="100">
                    </el-table-column>
                    <el-table-column  prop="statusWord"
                            header-align="center" align="center"
                            label="状态"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column  prop="creatorName"
                            header-align="center"
                            label="制定人"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column  prop="createTime"
                            header-align="center"
                            label="制定时间"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column  prop="reviewerName"
                            header-align="center"
                            label="审核人"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column  prop="reviewTime"
                            header-align="center"
                            label="审核时间"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column  prop="approverName"
                            header-align="center"
                            label="审批人"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column  prop="approvalTime"
                            header-align="center"
                            label="审批时间"
                            width="100" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination v-if="isPaging2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                               :current-page="pageIndex2"  :page-size="pageSize2"
                               layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage2"
                               :total="totalNumber2"></el-pagination>
            </el-tab-pane>
        </el-tabs>
        <!--完成弹窗-->
        <el-dialog title="提示" :visible.sync="dialogVisible" size="tiny" :before-close="handleClose" :lock-scroll="false">
            <span>
                计划完成后，当前计划中所有未完成的备件计划数量，将被取消；系统将对计划执行的情况归档，仅供查询使用。
            </span>
            <p style="margin-top:16px;">
                确定完成当前的计划吗？
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="dialogVisible = false">取 消</el-button>
                <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="confirmDone()">确 定</el-button>
            </span>
        </el-dialog>
        <!--已分配数量弹窗-->
        <el-dialog id="replaceMask" title="按备件已分配明细" :visible.sync="handleAsignedCountVisible" size="large" :lock-scroll="false">
            <el-table :data="detailsData1" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="materialCode" label="备件编码" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="备件名称" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="standard" label="规格" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="unit" label="计量单位" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="quantity" label="计划数量" header-align="center" width="80"></el-table-column>
                <el-table-column property="allocatedQuantity" label="已分配数量" header-align="center" width="80"> </el-table-column>
                <el-table-column property="undistributed" label="未分配数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="vendorName" label="供应商名称" header-align="center" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-dialog>
        <!--已采购数量弹窗-->
        <el-dialog id="hadBuy" title="按备件已采购明细" :visible.sync="check2Visible" size="small" :lock-scroll="false">
            <el-table :data="detailsData2" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="materialCode" label="备件编码" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="备件名称" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="standard" label="规格" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="unit" label="计量单位" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="poNo" label="订单编号" header-align="center" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column property="sapNo" label="SAP PO" header-align="center" width="80"> </el-table-column>
                <el-table-column property="poQuantity" label="PO数量" header-align="center" width="100"> </el-table-column>
            </el-table>
        </el-dialog>
        <!--已送货数量弹窗-->
        <el-dialog id="hadDelivery" title="按备件已送货明细" :visible.sync="check3Visible" size="large" :lock-scroll="false">
            <el-table :data="detailsData3" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="materialCode" label="备件编码" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="备件名称" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="standard" label="规格" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="unit" label="计量单位" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="poNo" label="订单编号" header-align="center" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column property="sapNo" label="SAP PO" header-align="center" width="80"> </el-table-column>
                <el-table-column property="poQuantity" label="PO数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="deliveryNo" label="送货单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="deliveryQuantity" label="已送货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="notDeliveryQuantity" label="未送货数量" header-align="center" width="100"> </el-table-column>
            </el-table>
        </el-dialog>
        <!--已收货数量弹窗-->
        <el-dialog id="hadGet" title="按备件已收货明细" :visible.sync="check4Visible" size="large" :lock-scroll="false">
            <el-table :data="detailsData4" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="materialCode" label="备件编码" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="备件名称" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="standard" label="规格" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="unit" label="计量单位" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="quantity" label="订单编号" header-align="center" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column property="price" label="SAP PO" header-align="center" width="80"> </el-table-column>
                <el-table-column property="amount" label="PO数量" header-align="center" width="100" > </el-table-column>
                <el-table-column property="amount" label="送货单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="已送货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="未送货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="收货单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="收货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="未收货数量" header-align="center" width="100"> </el-table-column>
            </el-table>

        </el-dialog>
        <!--已入库数量弹窗-->
        <el-dialog id="hadKu" title="按备件已入库明细" :visible.sync="check5Visible" size="large" :lock-scroll="false">
            <el-table :data="detailsData5" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="materialCode" label="备件编码" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="备件名称" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="standard" label="规格" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="unit" label="计量单位" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="quantity" label="订单编号" header-align="center" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column property="price" label="SAP PO" header-align="center" width="80"> </el-table-column>
                <el-table-column property="amount" label="PO数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="送货单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="已送货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="未送货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="收货单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="收货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="未收货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="入库单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="入库数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="未入库数量" header-align="center" width="100"> </el-table-column>
            </el-table>
        </el-dialog>
        <!--入库不良数量弹窗-->
        <el-dialog id="hadNoKu" title="按备件已入库明细" :visible.sync="check6Visible" size="large" :lock-scroll="false">
            <el-table :data="detailsData6" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="materialCode" label="备件编码" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="备件名称" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="standard" label="规格" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="unit" label="计量单位" header-align="center" width="80" show-overflow-tooltip> </el-table-column>
                <el-table-column property="quantity" label="订单编号" header-align="center" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column property="price" label="SAP PO" header-align="center" width="80"> </el-table-column>
                <el-table-column property="amount" label="PO数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="送货单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="已送货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="未送货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="收货单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="收货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="未收货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="入库单号" header-align="center" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="入库数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="未入库数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="amount" label="入库不良数量" header-align="center" width="100"> </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
       export default {
        data() {
            return {
                labelWidth:"80px",
                // 按计划跟踪表单查询条件
                formInline:{
                    materialCode:"",
                    materialName:"",
                    partnerCode:"",
                    partnerName:"",
                    supplierDropdown:[],

                    legalPersonId:"",
                    legalPersonName:"",
                    planCode:"",
                    createTimeBegin:"",
                    createTimeEnd:"",
                    creatorName:"",
                    status:"",
                    aggregationStatus:"",
                    reviewerName:"",
                    approverName:""
                },
                legalPersonDropDown:[], //法人名称
                /*supplierNameDropDown:[], //供应商名称*/
                activeName2: 'first',
                loading:false,
                loading2:false,
                seleType:0,//定义查询目标
                materiaData: [],//备件明细
                planData:[],//计划明细

                //弹窗显示
                dialogVisible:false,//完成
                detailsData1:[],//已分配数量弹窗
                handleAsignedCountVisible:false,
                detailsData2:[],//已采购数量弹窗
                check2Visible:false,
                detailsData3:[],//已送货数量弹窗
                check3Visible:false,
                detailsData4:[],//已收货数量弹窗
                check4Visible:false,
                detailsData5:[],//已入库数量弹窗
                check5Visible:false,
                detailsData6:[],//已入库数量弹窗
                check6Visible:false,

                // 分页
                //按备件查询分页
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                totalNumber: 20,
                totalPage:2,
                isPaging:false,
                //按计划查询分页
                pageIndex2:1,    //当前页（必传）
                pageSize2 :10,   //每页多少条
                totalNumber2: 20,
                totalPage2:2,
                isPaging2:false,
                //查询禁用
                selectDisabled:false,
                select2Disabled:false,

                powerFlag:false
            };
        },
        computed:{
               powerData(){
                   return this.$store.state.powerData;
               }
           },
       watch:{
           powerData(){
               var _this=this;
               for(var i=0;i<_this.powerData.length;i++){
                   if(_this.powerData[i]=="ROLE_security_planExecutionTracking_done"){
                       //计划执行跟踪确认权限
                       _this.powerFlag=true;
                   }
               }
           }
       },
       mounted: function () {
            var _this = this;
            _this.$store.commit('currentActive', 'PlanTracking');
        //    //ajax前后查询按钮禁用
        //    $(".selectAll").ajaxStart(function(){
        //        _this.selectDisabled=true;
        //    });
        //    $(".selectAll").ajaxStop(function(){
        //        _this.selectDisabled=false;
        //    });
            var windowH=$(window).outerHeight();
            var headerH=$(".el-row").outerHeight();
            var footerH=$(".footer").outerHeight();
            var mainH=windowH-headerH-footerH;
            $(".plan-tracking-page").height(mainH - 50);

           _this.legalPersonDropDownValue(); //法人名称下拉列表值
           _this.queryMateriaSheet();
           //判断权限
           for(var i=0;i<_this.powerData.length;i++){
               if(_this.powerData[i]=="ROLE_security_planExecutionTracking_done"){
                   //计划执行跟踪确认权限
                   _this.powerFlag=true;
               }
           }
       },
        methods: {
            // 按备件跟踪   指定日期格式化
            selectedCreateTimeBegin(val){
                var _this=this;
                _this.formInline.createTimeBegin = val;
            },
            selectedCreateTimeEnd(val){
                var _this=this;
                _this.formInline.createTimeEnd = val;
            },
            //卡片点击
            handleClick(tab, event) {
                var _this=this;
                //判断是备件明细还是计划明细,first为备件明细,second为计划明细
                if(tab.name=="first"){
                    _this.seleType=0;//按备件跟踪
                    // _this.formInline.legalPersonName="";
                    _this.formInline.planCode="";
                    _this.formInline.createTimeBegin="";
                    _this.formInline.createTimeEnd="";
                    _this.formInline.status="";
                    _this.queryMateriaSheet();
                }else if(tab.name=="second"){
                    _this.seleType=1;//按计划跟踪
                    // _this.formInline.legalPersonName="";
                    _this.formInline.planCode="";
                    _this.formInline.createTimeBegin="";
                    _this.formInline.createTimeEnd="";
                    _this.formInline.status="";
                    _this.queryPlanTrackingSheet();
                }
            },
            //弹窗点击  根据_this.seleType判断是按备件跟踪还是按计划跟踪，调取不同的接口获取不同的数据
            handleAsignedCount(index,row){
                var _this=this;
                _this.handleAsignedCountVisible=true;
                if(_this.seleType==0){
                    //按备件跟踪的、已分配数量查询列表
                    var tmp={planItemId: row.planItemId};
                    $.ajax({
                        type: 'POST',
                        url: _this.procurement_service+"planFollow/queryByPlanItemId",
                        cache: false,
                        data:JSON.stringify(tmp),
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                _this.detailsData1=data.data;
                                if(_this.detailsData1.length){
                                   _this.CUndistributed();// 未分配数量计算 
                                }
                            }else
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                }else if(_this.seleType==1){
                    //按计划跟踪的、已分配数量查询列表
                    var tmp={planId: row.planId};
                    $.ajax({
                        type: 'POST',
                        url: _this.procurement_service+"planFollow/queryByPlanId",
                        cache: false,
                        data:JSON.stringify(tmp),
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                _this.detailsData1=data.data;
                                if(_this.detailsData1.length){
                                   _this.CUndistributed();// 未分配数量计算 
                                }
                            }else
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                }
            },
            // 未分配数量计算
            CUndistributed(){
                var _this=this;
                for(var i=0;i<_this.detailsData1.length;i++){
                    _this.detailsData1[i].undistributed=_this.detailsData1[i].quantity - _this.detailsData1[i].allocatedQuantity;
                }
            },
            // 已采购数量
            check2(index,row){
                var _this=this;
                _this.check2Visible=true;
                if(_this.seleType==0){
                    //按备件跟踪的、已采购数量查询列表
                    var tmp={planItemId: row.planItemId};
                    $.ajax({
                        type: 'POST',
                        url: _this.procurement_service+"planFollowProcurement/queryByPlanItemId",
                        cache: false,
                        data:JSON.stringify(tmp),
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                _this.detailsData2=data.data;
                            }else
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                }else if(_this.seleType==1){
                    // 按计划跟踪的、已采购数量查询列表
                    var tmp={planId: row.planId};
                    $.ajax({
                        type: 'POST',
                        url: _this.procurement_service+"planFollowProcurement/queryByPlanId",
                        cache: false,
                        data:JSON.stringify(tmp),
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                _this.detailsData2=data.data;
                            }else
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                }
            },
            // 已送货数量
            check3(index,row){
                var _this=this;
                _this.check3Visible=true;
                if(_this.seleType==0){
                    //按备件跟踪的、已送货数量查询列表
                    var tmp={planItemId: row.planItemId};
                    $.ajax({
                        type: 'POST',
                        url: _this.procurement_service+"planFollowDelivery/queryByPlanItemId",
                        cache: false,
                        data:JSON.stringify(tmp),
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                _this.detailsData3=data.data;
                                if(_this.detailsData3.length){
                                    _this.CNotDeliveryQuantity(); // 已送货数量弹窗   未送货数量计算notDeliveryQuantity
                                }
                            }else
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                }else if(_this.seleType==1){
                    // 按计划跟踪的、已送货数量查询列表
                    var tmp={planId: row.planId};
                    $.ajax({
                        type: 'POST',
                        url: _this.procurement_service+"planFollowProcurement/queryByPlanId",
                        cache: false,
                        data:JSON.stringify(tmp),
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                _this.detailsData3=data.data;
                                if(_this.detailsData3.length){
                                    _this.CNotDeliveryQuantity(); // 已送货数量弹窗   未送货数量计算notDeliveryQuantity
                                }
                            }else
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                }
            },
            // 已送货数量弹窗   未送货数量计算notDeliveryQuantity
            CNotDeliveryQuantity(){
                var _this=this;
                for(var i=0;i<_this.detailsData3.length;i++){
                    _this.detailsData3[i].notDeliveryQuantity=_this.detailsData3[i].poQuantity - _this.detailsData3[i].deliveryQuantity;
                }
            },
            check4(index,row){
                var _this=this;
                _this.check4Visible=true;
            },
            check5(index,row){
                var _this=this;
                _this.check5Visible=true;
            },
            check6(index,row){
                var _this=this;
                _this.check6Visible=true;
            },
            //完成
            handleClose() {
                var _this=this;
                _this.dialogVisible = false;
            },
            //完成、确定
            confirmDone(){
                var _this=this;
                _this.dialogVisible = false;
            },
            //法人名称下拉列表值
            legalPersonDropDownValue(){
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"legalPerson/ofCurrentUser",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.legalPersonDropDown = data.data;
                            if(_this.legalPersonDropDown.length == 1){
                                _this.formInline.legalPersonName=_this.legalPersonDropDown[0].legalPersonName;
                                _this.formInline.legalPersonId=_this.legalPersonDropDown[0].id;
                               // _this.dropdownValue();//获取供应商下拉列表值
                            }
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 选择法人 取id
            changeLegalPerson(){
                var _this = this;
                for(var i=0;i<_this.legalPersonDropDown.length;i++){
                    if(_this.formInline.legalPersonName==_this.legalPersonDropDown[i].id){
                        _this.formInline.legalPersonCode=_this.legalPersonDropDown[i].legalPersonCode;//获取法人编码进行传参查询
                        _this.formInline.legalPersonId=_this.legalPersonDropDown[i].id;//获取id查询供应商列表
                    }
                }
                //_this.dropdownValue();//获取供应商下拉列表值
            },
            //供应商下拉列表值
            /*dropdownValue(){
                var _this=this;
                $.ajax({
                    type:'GET',
                    url:_this.metadata_service+"partner/queryByLegalPerson?legalPersonId="+_this.formInline.legalPersonId,
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.formInline.supplierDropdown=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },*/
            //备件明细查询
            queryMateriaSheet(){
                var _this=this;
                var tmp={legalPersonId: _this.formInline.legalPersonId,planCode: _this.formInline.planCode,createTimeBegin: _this.formInline.createTimeBegin,createTimeEnd: _this.formInline.createTimeEnd,creatorName: _this.formInline.creatorName,status: _this.formInline.status,materialCode:_this.formInline.materialCode,materialName:_this.formInline.materialName,pageIndex: _this.pageIndex, pageSize: _this.pageSize};
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"planTracking/queryPlanItem",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            // _this.loading=false;
                            _this.isPaging=true;
                            var arr=data.data.content;
                            //金额保留两位
                            for(var i=0;i<arr.length;i++){
                                arr[i].amount=arr[i].amount.toFixed(2);
                            }
                            _this.materiaData=arr;
                            _this.totalPage=data.data.totalPages;
                            _this.totalNumber=data.data.totalElements;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.selectDisabled=false;    
                    }
                });
            },
            //计划明细查询
            queryPlanTrackingSheet(){
                var _this=this;
                var tmp={legalPersonId: _this.formInline.legalPersonId,planCode: _this.formInline.planCode,createTimeBegin: _this.formInline.createTimeBegin,createTimeEnd: _this.formInline.createTimeEnd,creatorName: _this.formInline.creatorName,status: _this.formInline.status,aggregationStatus: _this.formInline.aggregationStatus,reviewerName:_this.formInline.reviewerName,approverName:_this.formInline.approverName,pageIndex: _this.pageIndex2, pageSize: _this.pageSize2};
                _this.select2Disabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"planTracking/queryPlan",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            // _this.loading=false;
                            _this.isPaging2=true;
                            var arr=data.data.content;
                            //金额保留两位
                            for(var i=0;i<arr.length;i++){
                                arr[i].total=arr[i].total.toFixed(2);
                            }
                            _this.planData=arr;
                            _this.totalPage2=data.data.totalPages;
                            _this.totalNumber2=data.data.totalElements;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.select2Disabled=false;    
                    }
                });
            },
            //  备件明细 分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                var _this=this;
                _this.pageSize=val;
                _this.queryMateriaSheet();

            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                var _this=this;
                _this.pageIndex=val;
                _this.queryMateriaSheet();
            },
              //  计划明细 分页
            handleSizeChange2(val) {
                // console.log(`每页 ${val} 条`);
                var _this=this;
                _this.pageSize2=val;
                _this.queryPlanTrackingSheet();

            },
            //点击页码分页查询点击事件
            handleCurrentChange2(val) {
                // console.log(`当前页: ${val}`);
                var _this=this;
                _this.pageIndex2=val;
                _this.queryPlanTrackingSheet();
            },
            // // ===================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },
            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }

        }
            
    }
</script>